<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
      <el-form-item label="名称" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="请输入货物名称"></el-input>
      </el-form-item>
      <el-form-item label="所占空间" prop="goodsCosts">
        <el-input v-model="form.goodsCosts" placeholder="请输入货物所占空间 (个/货架)"></el-input>
      </el-form-item>
      <el-form-item label="尺寸" prop="goodsSize">
        <el-input v-model="form.goodsSize" placeholder="请输入货物规格 (??.?×??.?×??.?mm)"></el-input>
      </el-form-item>
      <el-form-item label="重量" prop="goodsWeight">
        <el-input v-model="form.goodsWeight" placeholder="请输入货物重量 (单位：g)"></el-input>
      </el-form-item>
      <el-form-item label="是否隐藏" prop="goodsHidden">
        <el-switch v-model="form.goodsHidden"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {goodsAdd, goodsEdit, goodsInfo, goodsList} from '@/api/user'
export default {
  data() {
    return {
      form: {
        goodsId: this.$route.query.id || '',
        goodsName: '',
        goodsCosts: '',
        goodsSize: '',
        goodsWeight: '',
        goodsHidden: false
      },
      rules: {
        goodsName: [
          { required: true, message: '请输入货物名称', trigger: 'change' }
        ],
        goodsCosts: [
          { required: true, message: '请输入货物所占空间', trigger: 'change' }
        ],
        goodsSize: [
          { required: true, message: '请输入货物规格', trigger: 'change' }
        ],
        goodsWeight: [
          { required: true, message: '请输入货物质量', trigger: 'change' }
        ],
        goodsHidden: [
          { required: true, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    console.log(this.$route.query.id)
    if (this.form.goodsId) {
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      goodsInfo({ goodsId: this.form.goodsId }).then(res => {
        res.data.goodsHidden = 1 ? false : true
        this.form = res.data
      })
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form.goodsId);
          if (this.form.goodsId) {
            console.log(1)
            this.form.goodsHidden = this.form.goodsHidden ? 1 : 0
            goodsEdit(this.form).then(res => {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.$router.push({ name: 'GoodsInfo' })
            })
          } else {
            console.log(2)
            this.form.goodsHidden = this.form.goodsHidden ? 1 : 0
            goodsAdd(this.form).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$router.push({ name: 'GoodsInfo' })
            })
          }
        }
      });
    },
    onCancel() {
      this.$router.push({ name: 'GoodsInfo' })
    }
  }
}
</script>
<style lang="scss">
.container {
  padding: 50px;
  display: flex;
  justify-content: center;
  .form {
    width: 700px;
  }
}
</style>
